<template>
	<div>
		<div class="tab-box">
			<span
				v-for="(item, index) in tabs[currentTab]"
				:key="index"
				:class="[activeTab === item ? 'active-tab' : '', 'normal-tab']"
				@click="activeTabHandler(item)"
				>{{ item }}</span
			>
		</div>
		<div class="index-box">
			<div v-for="(item, index) in list" :key="index">
				<div @click="goToDetail(item.article_id)">
					{{ item.article_info.title }}
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
export default {
	components: {},
	data() {
		return {
			currentTab: this.$route.params.firstPage,
			activeTab: "",
			tabs: {
				recommend: [],
				backend: ["Java", "后端", "Spring Boot", "Python"],
				frontend: ["前端", "javascript", "vue.js"],
				android: ["Android", "flutter"],
			},
		};
	},
	watch: {
		$route: {
			handler(newVal, oldVal) {
				this.currentTab = newVal.params.firstPage;
				this.$store.dispatch("fetchIndexData", "推荐");
			},
			deep: true,
			immediate: true,
		},
	},
	computed: {
		...mapState(["list"]),
	},
	// mapState({
	//     list: state => state.list,
	//     name: 'name',
	// }),
	// {
	//     list() {
	//         return this.$store.state.list
	//     },
	//     name() {
	//         return this.$store.state.name
	//     },
	//     a() {
	//         return this.$store.state.a
	//     }
	// },
	methods: {
		...mapMutations(["setName"]),
		activeTabHandler(text) {
			this.activeTab = text;
			this.$store.dispatch("fetchIndexData", text);
			// axios.get(`/index/page?type=${text}`).then(res => {
			//     this.list = res.data.data.data
			// })
		},
		change() {
			// this.$store.state.name = 'hello'
			this.setName("dddd");
			// this.$store.commit('setName', 'hhelo')
		},
		goToDetail(id) {
			this.$router.push("/detail?id=" + id);
		},
	},
};
</script>
<style lang="scss" scoped>
.normal-tab {
	margin-right: 10px;
}
.active-tab {
	color: red;
}
.index-box {
	width: 960px;
	margin: 0 auto;
}
.tab-box{
    width: 960px;
    margin: 0 auto;
}
</style>
